/* eslint-disable no-useless-escape */
<template>
    <div class="dialogs">
        <span class="back">&lt;返回</span>
        <div class="dialogs-con">
            <audio src="http://cdnbbbd.shoujiduoduo.com/bb/audio/a48/141/3577141.aac" controls v-timeupdate="curTime"></audio>
            <div class="list" ref="list">
                <ul>
                    <li @click="play(item.time)" :ref="'li'+index" v-for="(item,index) in list" :key="item.time" :class="{'active':index === curIndex}" >{{item.text}}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'dialogs',
    data(){
        return {
            list:[],  //歌词列表
            curTime:0, //歌曲播放的时间
            curIndex:-1, //当前播放歌词的index
            type:'update', //curTime
        }
    },
    created(){
        this.$http.getSongTxt().then(res => {
            // console.log(res.data);
            this.list = this.formatData(res.data);
        })
    },
    methods:{
        formatData(str){
            // eslint-disable-next-line no-useless-escape
            str = str.replace(/\<\d+\,\-?\d+\>/g,'');
            // console.log(str);

            let list = [];

            // eslint-disable-next-line no-useless-escape
            str.replace(/\[(\d+\:\d+\.\d+)\]([^\[]+)/g,($1,$2,$3) => {
                // console.log($1,$2,$3);

                let [f,m] = $2.split(':');
                
                let time = f*60*1000 + m*1000;
                console.log(time);

                list.push({
                    text:$3,
                    time
                })
            })

            list.push({
                text:'',
                time:Infinity
            })

            return list
        },
        play(time){
            console.log(time,"=====");
            this.type = 'click';
            this.curTime = time;
        }
        // [
        //     {
        //         text:'',
        //         time:1111
        //     },
        //     {
        //         text:'',
        //         time:''
        //     }
        // ]
    },
    watch:{
        curTime(newVal){
            //[1,2,3]  list[2]  list[3]
            this.list.forEach((item,index) => {
                if(item.time <= newVal*1000 && newVal*1000 < this.list[index+1].time){
                    this.curIndex = index;
                }
            })
        },
        curIndex(newVal){
            //获取盒子的高度
            let clientHeight = this.$refs.list.clientHeight/2;

            //获取当前的li
            let curTop = this.$refs['li'+newVal][0].offsetTop;

            this.$refs.list.scrollTop = curTop - clientHeight;

            console.log("=====",curTop,clientHeight);
        }
    }
    //数组 reduce((prev,cur,index) => {},[])  对象  字符串所有的方法 在纸上写一遍
}
</script>

<style lang="scss">
    .dialogs{
        width: 100%;
        height: 100%;
        position:absolute;
        top:0;
        left:0;
        z-index:9;
        background: #fff;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        display: none;
        .back{
            width:100%;
            height: 44px;
            line-height: 44px;
        }
        .dialogs-con{
            width:100%;
            flex:1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            audio{
                width:100%;
                height: 44px;
            }
            .list{
                width: 100%;
                flex:1;
                overflow: auto;
                text-align: center;
                li{
                    padding:10px;
                }
            }
        }

        .active{
            color:red;
        }
    }
    
</style>